<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
   <div class="layuimini-main">
      <fieldset class="table-search-fieldset">
        <legend>多条件搜索</legend>
         <div class="layui-form layui-form-pane" lay-filter="orderForm">
           <div class="layui-form-item">
                <label class="layui-form-label required">商品名称</label>
                <div class="layui-input-block">
                   <input id="goodsName" type="text" name="goodsName" placeholder="请输入商品名称" value="" class="layui-input">           
                </div>
           </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">尺寸</label>
        <div id="standard" class="layui-input-block">
            <input type="checkbox" name="standard1" value="小" title="小">
            <input type="checkbox" name="standard2" value="中" title="中">
            <input type="checkbox" name="standard3" value="大" title="大">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">材质</label>
        <div id="material" class="layui-input-block">
            <input type="checkbox" name="material1" value="硅胶" title="硅胶">
            <input type="checkbox" name="material2" value="油泥" title="油泥">
            <input type="checkbox" name="material3" value="黏土" title="黏土">
            <input type="checkbox" name="material4" value="PVC" title="PVC">
        </div>
    </div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">出/入库</label>
       <div id="status" class="layui-input-block">
         <input type="checkbox" name="status1" value="in"   title="入库单据" checked>
         <input type="checkbox" name="status2"  value="out" title="出库单据" checked>
       </div>
    </div>

    <div class="layui-form-item">
       <label class="layui-form-label" style="margin-right:9px">起始时间</label>
       <div class="layui-input-block" style="margin: 5px">
         <input type="date" name= "start" class="layui-date layui-btn layui-btn-primary" >  
         <input type="date" name= "end"   class="layui-date layui-btn layui-btn-primary" >  
          <tip>比较规则：2020-11-23 00:00:00 - 2020-11-26 00:00:00 (包含启始时间)</tip>
       </div>
    </div>
    <div class="layui-form-item">     
       <button id='searchbtn' type="button" class="layui-btn layui-btn-sm "  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>       
    </div>
</div>
</fieldset>
         <div class="layui-inline" style = "margin-top:8px">
            <button id="resetTable" type="button" class="layui-btn layui-btn-sm layui-btn-warm">重置表格</button>
         </div>

      <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
         <script type="text/html" id="currentTableBar">
            <input  type= "button" value = "编辑" class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="editOrder">
            <input  type= "button" value=  "撤销订单" class="layui-btn layui-btn-xs layui-btn-danger data-count-delete"  lay-event= "delete" >
         </script>
    </div>
</div>

<script type="text/html" id='goodsFormsInOut'>
<div  class="layui-form layuimini-form" lay-filter="goodsFormsInOut">
    <div class="layui-form-item">
        <input type='text' name = 'orderNo' value=""  hidden >  
        <label class="layui-form-label required">商品编号</label>
        <div class="layui-input-block">
            <input  disabled type="text" name="goodsNo"  lay-verify="required"  value="" class="layui-btn layui-btn-primary">
            <tip sytle="color:red">不可编辑</tip>           
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-block">
            <input  disabled type="text" name="goodsName"  lay-verify="required"  value="" class="layui-btn layui-btn-primary">
            <tip sytle="color:red">不可编辑</tip>           
        </div>
    </div>


    <div class="layui-form-item">
         <label class="layui-form-label required">生产厂家/订货商家</label>
         <div class="layui-input-block">
            <input   type="text" name="factory" lay-verify="required" value="" class="layui-input">          
         </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">尺寸</label>
        <div class="layui-input-block">
            <input  disabled type="text" name="standard" lay-verify="required"   value="" class="layui-btn layui-btn-primary">  
            <tip sytle="color:red">不可编辑</tip>          
        </div>
    </div>
    <div class="layui-form-item">
         <label class="layui-form-label required">材质</label>
         <div class="layui-input-block">
            <input  disabled  type="text" name="material" lay-verify="required" value="" class="layui-btn layui-btn-primary">
            <tip sytle="color:red">不可编辑</tip>            
         </div>
    </div>


    <div class="layui-form-item">
         <label class="layui-form-label required">出/入库价格</label>
         <div class="layui-input-block">
            <input type="text" name="singlePrice" lay-verify="required" value="" class="layui-input">         
         </div>
    </div>


    <div class="layui-form-item">
         <label class="layui-form-label required">数量</label>
         <div class="layui-input-block">
            <input  type="text" name="num" lay-verify="required" value="" class="layui-input">         
         </div>
    </div>

     <div class="layui-form-item">
        <label class="layui-form-label required">出/入日期</label>
        <div class="layui-input-block">
            <input type="date" name="dateio" value="" class="layui-date layui-btn layui-btn-primary" >         
        </div>
    </div>

    <div class="layui-form-item">
         <label class="layui-form-label required">送/取货单位</label>
         <div class="layui-input-block">
            <input  type="text" name="unit" lay-verify="required" value="" class="layui-input">         
         </div>
    </div>

    <div class="layui-form-item">
         <label class="layui-form-label required">送/提货人姓名</label>
         <div class="layui-input-block">
            <input  type="text" name="personName" lay-verify="required" value="" class="layui-input">         
         </div>
    </div>

   <div class="layui-form-item">
         <label class="layui-form-label required">送/提货人电话</label>
         <div class="layui-input-block">
            <input  type="text" name="tel" lay-verify="required" value="" class="layui-input">         
         </div>
    </div>


    <div class="layui-inline">
      <label class="layui-form-label">出/入库</label>
      <div class="layui-input-inline">
        <select name="statuss" id='sel' lay-verify="required" lay-search="">
          
        </select>
      </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="updateOrder" class="layui-btn layui-btn-normal">确认更新</button>
        </div>
    </div>
</div>
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    // location.reload();
    layui.use(['form', 'table' ,'layer' ], function () {

        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
          $('#searchbtn').on('click',function(){
        	  var data = form.val('orderForm');
        	  console.log(data);
        	  table.render({
                  elem: '#currentTableId',
                  url:  '/orders?action=selectOrdersList',
                  where: data,       
                  cols: [[
                	  {field: 'dateio', width: 100, title: '出入日期' ,sort: true},
                	  {field: 'goodsNo', width: 100, title: '商品类编号' ,sort: true},
                	  {field: 'goodsName', width: 80, title: '商品名称' },
                	  {field: 'standard', width: 80, title: '尺寸'},
                	  {field: 'material', width: 80, title: '材质'},   
                      {field: 'orderNo', width: 150, title: '单据编号'},
                      {field: 'factory', width: 150, title: '生产厂商/订货商家'},
                      {field: 'singlePrice', width: 60, title: '出/入库单价'},
                      {field: 'num', title: '数量', width:90 },
                      {field: 'datetime', width: 100, title: '创建时间' },
                      {field: 'unit', width: 100, title: '运送单位' },
                      {field: 'personName', width: 100, title: '送/取货人姓名'},
                      {field: 'tel', width: 100, title: '电话'},
                      {field: 'status', width: 100, title: '出/入库', sort:true},
                      {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                  ]],                                    
                  page: true,

                  limits:  [5,10, 15, 20, 25, 50, 100],
                  limit: 10,
              });  	
          });
          
          $('#resetTable').on('click',function(){
        	  var data = form.val('orderForm');
        	  console.log(data);
        	  table.render({
                  elem: '#currentTableId',
                  url:  '/orders?action=selectOrdersList',
                  cols: [[
                	  {field: 'dateio', width: 100, title: '出入日期' },
                	  {field: 'goodsNo', width: 100, title: '商品类编号' ,sort: true},  
                	  {field: 'goodsName', width: 80, title: '商品名称' },
                	  {field: 'standard', width: 80, title: '尺寸'},
                	  {field: 'material', width: 80, title: '材质'},   
                      {field: 'orderNo', width: 150, title: '单据编号'},
                      {field: 'factory', width: 150, title: '生产厂商/订货商家'},
                      {field: 'singlePrice', width: 60, title: '出/入库单价'},
                      {field: 'num', title: '数量', width:90 },
                      {field: 'datetime', width: 100, title: '创建时间' },
                      {field: 'unit', width: 100, title: '运送单位' },
                      {field: 'personName', width: 100, title: '送/取货人姓名'},
                      {field: 'tel', width: 100, title: '电话'},
                      {field: 'status', width: 100, title: '出/入库', sort:true},
                      {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                  ]],
                  page: true,
                  limit: 10,
                  limits:  [5,10, 15, 20, 25, 50, 100],
              });  	
        }).click();

        table.on('tool(currentTableFilter)', function (obj) {  
           var data = obj.data;
           console.log('this is data');
           console.log(data);
           if(obj.event==="editOrder"){
        	  layer.open({
        		type:1 ,
        		content: $('#goodsFormsInOut').html(),
        	    area:  ['60%','60%'],
        		title: '编辑单据',  
           });

           if(data.status == "入库"){
        	   $("#sel").append("<option selected value='"+  "in"  +"'> " + "入库"  +  "</option>");
        	   $("#sel").append("<option  value='"+  "out"  +"'> " + "出库"  +  "</option>");
           }else{
        	   $("#sel").append("<option  value='"+  "in"  +"'> " + "入库"  +  "</option>");
        	   $("#sel").append("<option selected value='"+  "out"  +"'> " + "出库"  +  "</option>");
           }
              form.val('goodsFormsInOut',data);
              form.render();

           }else if(obj.event==="delete"){
           layer.confirm('真的要删除吗？',function(){
               layer.load(2);
        	  $.post('/orders?action=deleteOrderByOrderNo', {orderNo:data.orderNo,goodsNo:data.goodsNo} ,function(){
                    console.log('this click **************');
        	        layer.closeAll();
                    $('#resetTable').click();
        	     });
        	 });
           }  
        });
        $('body').on('click','#updateOrder', function(){
        	var data = form.val('goodsFormsInOut');
        	console.log(data);
            layer.load(2);
        	$.post('/orders?action=updateOrder', data , function(){
        		console.log('this ok');
        		layer.closeAll();
        		$('#resetTable').click();
        	});
        });
    });

</script>
</body>
</html>

